<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cloth store</title>
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/assets/bootstrapValidator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/assets/toastr/toastr.css"> 
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .order{
            min-height: 600px;
        }
        .order h4{
            height: 35px;
            line-height: 35px;
            background-color: #ebebeb;
            margin: 30px 0;
            text-align: center;
        }
        table tr,table td{
            height: 28px;
            line-height: 28px !important;
        }
    </style>
</head>
<body>
    <div class="store">
        <header class="header"></header>
        <div class="order wrapper">
            <h4>Purchase records</h4>
            <table class="table  table-hover">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Commodity amount</th>
                        <th>Transaction mode</th>
                        <th>Payment time</th>
                    </tr>
                </thead> 
                <tbody>
                    <% data.forEach(json=>{ %>
                        <tr class="active">
                            <td><%= json.id %></td>
                            <td>RMB <%= json.price %></td>
                            <td style="color: <%= json.color %>"><%= json.payment_mode %></td>
                            <td><%= json.payment_time %></td>
                        </tr>
                    <% })%>
                </tbody>
            </table>
        </div>
        <footer class="footer"></footer>
    </div>
   <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/bootstrapValidator/js/bootstrapValidator.min.js"></script>
    <script src="/assets/toastr/toastr.min.js"></script>
</body>
</html>